<style>
  .picImg {
    width: 40px;
    height: 40px;
  }
</style>
<template>
  <div class="app-container">
    <!--&lt;!&ndash; 查询和其他操作 &ndash;&gt;-->
    <div class="filter-container">
      <el-date-picker
        v-model="infoTime.startTime"
        type="datetime"
        placeholder="查询开始日期"
        value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      -
      <el-date-picker
        v-model="infoTime.endTime"
        type="datetime"
        placeholder="查询结束日期"
        value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <!--状态暂无添加-->
      <el-select v-model="infoTime.status" placeholder="请选择状态">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button @click="getList" type="primary">查询</el-button>
      <el-button type="primary" icon="el-icon-edit"
                 @click="handleEdit">新增
      </el-button>
    </div>
    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
              :header-cell-style="{background:'#92D3FF',color:'#fff'}">

      <el-table-column fixed align="center" min-width="100" label="表单编号" prop="formNo"/>
      <el-table-column align="center" min-width="100" label="上传时间" prop="addTime"/>
      <el-table-column align="center" min-width="120" label="保险公司名称" prop="suranceName"/>
      <el-table-column align="center" min-width="130" label="权益服务商名称" prop="agentName"/>
      <el-table-column align="center" min-width="120" label="保理公司名称" prop="factoringName"/>
      <!--<el-table-column align="center" min-width="100" label="保单总数" prop="billCount"/>-->
      <el-table-column align="center" min-width="120" label="手续费总额 (元)" prop="amount"/>
      <el-table-column align="center" min-width="100" label="表单状态" prop="status">
        <template slot-scope="scope">{{ scope.row.status | statesFilter }}</template>
      </el-table-column>
      <el-table-column align="center" min-width="140" label="保代公司处理时间" prop="advanceTime"/>
      <!--<el-table-column align="center" min-width="100" label="需要垫资保单数" prop="advanceCount"/>
      <el-table-column align="center" min-width="100" label="需要垫资金额(元)" prop="advanceAmount"/>
      <el-table-column align="center" min-width="100" label="垫资支付时间" prop="advanceTime"/>-->
      <el-table-column align="center" min-width="120" label="还款总额 (元)" prop="repayAmount"/>
      <el-table-column align="center" min-width="100" label="还款时间" prop="repayTime"/>
      <el-table-column align="center" min-width="100" label="表单备注" prop="remarkUp"/>
      <!--<el-table-column align="center" min-width="100" label="垫资申请备注" prop="remarkAdv"/>-->
      <el-table-column fixed="right" align="center" label="操作" width="320" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini"
                     @click="detail(scope.row)" v-if="scope.row.status==0">修改
          </el-button>
          <el-button type="primary" size="mini"
                     v-if="scope.row.status==3"
                     @click="handleRepay(scope.row)">还款
          </el-button>
          <!--<el-button type="primary" size="mini"
                     @click="newTop(scope.row)" v-if="scope.row.status==0">重新上传
          </el-button>-->
          <!--<el-button type="danger" size="mini"-->
          <!--@click="doDelete(scope.row)" v-if="scope.row.status==0">删除-->
          <!--</el-button>-->
          <el-popover
            placement="top"
            width="200"
            trigger="manual"
            :ref="'popover-' + scope.row.id">
            <p>确定删除该数据吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="$refs[`popover-` + scope.row.id].doClose()">取消</el-button>
              <el-button type="primary" size="mini" @click="doDelete(scope.row)">确定</el-button>
            </div>
            <el-button type="danger" size="mini" slot="reference" @click="$refs[`popover-` + scope.row.id].doShow()"
                       v-if="scope.row.status==0">删除
            </el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
                @pagination="getList"/>
    <!--详情表单列表-->
    <el-dialog :visible.sync="editDialogVisible" title="明细列表" width="1000px" :close-on-click-modal="false">
      <el-table v-loading="listLoading1" :data="list1" element-loading-text="正在查询中。。。" border fit highlight-current-row
                :header-cell-style="{background:'#92D3FF',color:'#fff'}">

        <!--<el-table-column align="center" min-width="100" label="表单ID" prop="id"/>-->
        <el-table-column align="center" min-width="100" label="保单号或合同号" prop="billNo"/>
        <el-table-column align="center" min-width="100" label="保单金额(元)" prop="billAmount"/>
        <el-table-column align="center" min-width="100" label="服务费用(元)" prop="fee"/>
        <el-table-column align="center" min-width="100" label="统一信用代码" prop="unicode"/>
        <el-table-column align="center" min-width="100" label="是否需要垫资" prop="isAdvance">
          <template slot-scope="scope">{{ scope.row.isAdvance | typeFilter }}</template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editDialogVisible = false">确定</el-button>
      </div>
    </el-dialog>
    <!--上传表单列表-->
    <el-dialog :visible.sync="editDialogVisible1" :title="textMap[dialogStatus]" :close-on-click-modal="false">
      <el-form ref="editForm" :rules="editFormRules" :model="editForm" status-icon label-position="left"
               label-width="140px" style="width: 400px; margin-left:50px;">
        <el-form-item label="表单编号" prop="formNo">
          <el-input v-model="editForm.formNo" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="权益服务商公司" prop="insuragentID">
          <el-select v-model="editForm.insuragentID" placeholder="请选择保代公司">
            <el-option
              v-for="item in options1"
              :key="item.ID"
              :label="item.companyName"
              :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属保理公司" prop="factoringID">
          <el-select v-model="editForm.factoringID" placeholder="请选择保理公司">
            <el-option
              v-for="item in options2"
              :key="item.ID"
              :label="item.companyName"
              :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手续费总额" prop="amount">
          <el-input v-model="editForm.amount" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="editForm.remark" auto-complete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible1 = false">取消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="doFormUp">确定</el-button>
        <el-button v-else type="primary" @click="doEdit">确定</el-button>
      </div>
    </el-dialog>
    <!--还款-->
    <el-dialog :visible.sync="editDialogVisible3" title="还款" :close-on-click-modal="false">
      <el-form ref="repayForm" :rules="repayFormRules" :model="repayForm" status-icon label-position="left"
               label-width="100px" style="width: 400px; margin-left:50px;">
        <!--<el-form-item disabled label="表单编号" prop="id">
          <el-input disabled v-model="repayForm.id" auto-complete="off"/>
        </el-form-item>-->
        <el-form-item label="表单编号" prop="formNo">
          <el-input v-model="repayForm.formNo" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="还款金额" prop="repayAmount">
          <el-input :disabled="edit" v-model="repayForm.repayAmount" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="打款日期" prop="repayDate">
          <el-date-picker
            v-model="repayForm.repayDate"
            type="datetime"
            placeholder="打款日期"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="repayForm.remark" auto-complete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible3 = false">取消</el-button>
        <el-button type="primary" @click="doRepayForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {doGet, doPost, doFile, doForm} from '@/api'
    import {cities} from '@/utils/base'
    import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

    const FETCH_PAGE = 'bxservicefee.html'
    const FETCH_URL = {
        LIST: `${FETCH_PAGE}?op=list`,
        CREATE: `${FETCH_PAGE}?op=billlist`,
        EDIT: `${FETCH_PAGE}?op=add`,
        DELETE: `${FETCH_PAGE}?op=formreup`,
        IMPORT: `${FETCH_PAGE}?op=formdel`,
        FORMREPAY: `${FETCH_PAGE}?op=formrepay`,
        TAIL: `${FETCH_PAGE}?op=chg`
    }
    export default {
        name: 'bxservicefee',
        components: {Pagination},
        filters: {
            statesFilter(type) {
                return {
                    '0': '表单已上传',
                    '1': '权益服务商垫资已申请',
                    '2': '保理公司已接收',
                    '3': '保理公司垫资已支付',
                    '4': '保险公司已回款',
                    '5': '保代公司已确认',
                    '6': '垫资利息已支付',
                    '7': '权益服务商已取款',
                }[type]
            },
            typeFilter(type) {
                return {
                    '0': '待确认',
                    '1': '不需要',
                    '2': '需要',
                }[type]
            }
        },
        data() {
            return {
//        时间
                value: '',
                edit: true,
                infoTime: {
                    startTime: undefined,
                    endTime: undefined,
                    status: undefined,
                    pageNum: undefined
                },

                listQuery: {
                    pageNum: 1,
                    pageSize: 20
                },
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
//        状态
                options: [{
                    value: '',
                    label: '请选择状态'
                }, {
                    value: '0',
                    label: '表单已上传'
                }, {
                    value: '1',
                    label: '权益服务商垫资已申请'
                }, {
                    value: '2',
                    label: '保理公司已接收'
                }, {
                    value: '3',
                    label: '保理公司垫资已支付'
                }, {
                    value: '4',
                    label: '保险公司已回款'
                }, {
                    value: '5',
                    label: '保代公司已确认'
                }, {
                    value: '6',
                    label: '垫资利息已支付'
                },{
                    value: '7',
                    label: '权益服务商已取款'
                }],
                options1: [],
                options2: [],
//        列表加等待效果
                list: [],
                list1: [],
                total: 0,
                listLoading: true,
                listLoading1: true,
//        弹窗标题
                dialogStatus: undefined,
                textMap: {
                    datail: '表单明细列表',
                    create: '新增',
                    update: '编辑',
                    createNew: '重新上传'
                },
//        查询参数
                dotext: {
                    startTime: undefined,
                    endTime: undefined,
                    status: undefined,
                },

//        上传参数
                editForm: {
                    formNo: undefined,
                    insuragentID: undefined,
                    factoringID: undefined,
                    remark: undefined,
                    amount: undefined,
                    id: undefined
                },
//        上传参数表单验证
                editFormRules: {
                    formNo: [{required: true, message: '表单编号不允许为空', trigger: 'blur'}],
                    insuragentID: [{required: true, message: '权益公司名称不允许为空', trigger: 'blur'}],
                    factoringID: [{required: true, message: '保理公司名称不允许为空', trigger: 'blur'}],
                    amount: [{required: true, message: '手续费总额不允许为空', trigger: 'blur'}]
                },
//        上传参数
                repayForm: {
                    id: undefined,
                    formNo: undefined,
                    repayAmount: undefined,
                    repayDate: undefined,
                    remark: undefined,
                    advanceAmount: undefined,
                },
//        上传参数表单验证
                repayFormRules: {
                    formNo: [{required: true, message: '表单编号不允许为空', trigger: 'blur'}],
                    repayAmount: [{required: true, message: '回款金额不允许为空', trigger: 'blur'}],
                    repayDate: [{required: true, message: '打款日期不允许为空', trigger: 'blur'}],
                    // billFile: [{required: true, message: '明细列表不允许为空', trigger: 'blur'}]
                },
//        重新上传参数
                editForm1: {
                    id: undefined,
                    remark: undefined,
                    // billFile: undefined,
                },
//        重新上传参数表单验证
                editFormRules1: {
                    id: [{required: true, message: '表单ID不允许为空', trigger: 'blur'}],
                },
//        不知道是什么，上传组件绑定的
                fileList: [],
//        弹窗出没
                editDialogVisible: false,
                editDialogVisible1: false,
                editDialogVisible2: false,
                editDialogVisible3: false,

            }
        },
//    直接获取列表
        created() {
            this.getList()
            doGet('corrsearch.html?op=getCorrCompany&type=3', {})
                .then(response => {
                    this.options1 = response.rows
                })
                .catch(response => {

                })
            doGet('corrsearch.html?op=getCorrCompany&type=2', {})
                .then(response => {
                    this.options2 = response.rows
                })
                .catch(response => {
                    this.options2 = []
                })
        },
        methods: {
//      获取列表函数
            getList() {
                this.listLoading = true
                doGet(FETCH_URL.LIST, {...this.infoTime, ...this.listQuery}).then(response => {
                    this.list = response.rows
                    this.total = response.data.totalcount
                    this.listLoading = false
                }).catch(() => {
                    this.list = []
                    this.total = 0
                    this.listLoading = false
                })
            },
//      编辑
            detail(row) {
                this.editForm = {
                    id: row.id,
                    formNo: row.formNo,
                    insuragentID: row.insuragentID,
                    factoringID: row.factoringID,
                    remark: row.remark,
                    amount: row.amount
                }
                this.dialogStatus = 'update'
                this.editDialogVisible1 = true
                this.$nextTick(() => {
                    this.$refs['editForm'].clearValidate()
                })
            },
            doEdit() {
                this.$refs['editForm'].validate(valid => {
                    if (valid) {
                        doGet('bxservicefee.html?op=chg', this.editForm)
                            .then(response => {
                                this.editDialogVisible1 = false
                                this.getList()
                                this.$notify.success({
                                    title: '成功',
                                    message: '修改成功'
                                })
                            })
                            .catch(response => {
                                this.$notify.error({
                                    title: '失败',
                                    message: response.message
                                })
                            })
                    }
                })
            },
            //回款
            handleRepay(row) {
                this.editDialogVisible3 = true;
                this.dialogStatus = 'repay'
                this.repayForm = {
                    id: row.id,
                    remark: '',
                    advanceAmount: row.advanceAmount,
                    repayAmount: row.amount
                }
            },
            doRepayForm() {
                this.$refs['repayForm'].validate(valid => {
                    if (valid) {
                        console.log(JSON.stringify(this.repayForm))
                        doForm('bxservicefee.html?op=formrepay', this.repayForm).then((res) => {
                            this.listQuery.page = 1;
                            this.getList()
                            this.editDialogVisible3 = false
                            this.$notify.success({
                                title: '成功',
                                message: '回款成功'
                            })
                        }).catch(response => {
                            this.$notify.error({
                                title: '失败',
                                message: response.message
                            })
                        })
                    }
                })
            },
//      删除按钮
            doDelete(row) {
                doGet(FETCH_URL.IMPORT, {id: row.id})
                    .then(response => {
                        this.$notify.success({
                            title: '成功',
                            message: '删除成功'
                        })
                        const index = this.list.indexOf(row)
                        this.list.splice(index, 1)
                        this.total--
                        this.$refs[`popover-` + row.id].doClose()
                    })
                    .catch(response => {
                        this.$notify.error({
                            title: '失败',
                            message: response.message
                        })
                    })
            },
//      新增
            handleEdit(row) {
                this.dialogStatus = 'create'
                this.editDialogVisible1 = true
                this.editForm = {
                    formNo: undefined,
                    insuragentID: undefined,
                    factoringID: undefined,
                    remark: '',
                }
                this.fileList = []
                this.$nextTick(() => {
                    this.$refs['editForm'].clearValidate()
                })
            },
            doFormUp() {
                this.$refs['editForm'].validate(valid => {
                    if (valid) {
                        doForm('bxservicefee.html?op=add', this.editForm).then((res) => {
                            this.listQuery.page = 1;
                            this.getList()
                            this.editDialogVisible1 = false
                            this.$notify.success({
                                title: '成功',
                                message: '添加成功'
                            })
                        }).catch(response => {
                            this.$notify.error({
                                title: '失败',
                                message: response.message
                            })
                        })
                    }
                })
            },
//      重新上传表单列表
            newTop(row) {
                this.dialogStatus = 'createNew'
                this.editDialogVisible2 = true
                this.fileList = []
                this.editForm1 = {
                    id: row.id,
                    remark: '',
                },
                    this.$nextTick(() => {
                        this.$refs['editForm1'].clearValidate()
                    })
                this.editForm1.id = row.id
            },
            doReFormUp(param) {
                this.$refs['editForm1'].validate(valid => {
                    if (valid) {
                        if (!param.file) {
                            this.$notify.warning({
                                title: '警告',
                                message: `上传文件不能为空`
                            });
                            return false
                        }
                        let fd = new FormData()
                        fd.append('billFile', param.file)//传文件\
                        fd.append('id', this.editForm1.id)
                        // fd.append('remark', this.editForm1.insuragentID)
                        doFile('bxservicefee.html?op=formreup', fd).then((res) => {
                            this.listQuery.page = 1;
                            this.getList()
                            this.editDialogVisible1 = false
                            this.$notify.success({
                                title: '成功',
                                message: '上传成功'
                            })
                        }).catch(response => {
                            this.$notify.error({
                                title: '失败',
                                message: response.message
                            })
                        })
                    }
                })
            },
            fileChange(file, fileList) {
                this.fileList = fileList;
            },
            doFileUp(flag) {
                if (this.fileList.length == 0) {
                    this.$notify.warning({
                        title: '警告',
                        message: `上传文件不能为空`
                    });
                    return false
                }
                if (flag == 1) {
                    this.$refs.upload.submit()
                }
                if (flag == 2) {
                    this.$refs.reformupload.submit()
                }
                this.editDialogVisible2 = false;
            },
            beforeUploadFile(file) {
                console.log('before upload')
                console.log(file)
                let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
                let size = file.size / 1024 / 1024
                if (extension !== 'xlsx' && extension !== 'xls') {
                    this.$notify.warning({
                        title: '警告',
                        message: `只能上传Excel（即后缀是.xlsx或.xls）的文件`
                    });
                    return false
                }
                // if(size > 10) {
                //   this.$notify.warning({
                //     title: '警告',
                //     message: `文件大小不得超过10M`
                //   });
                // }
            },
        }
    }
</script>
